<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <!-- <script type="text/javascript" src="src/index.js"></script>
    <link rel="stylesheet" href="src/styles.css" /> -->
</head>

<body>
    <main>
        <h1>Test page</h1>
        <div id="testcase1">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Head 1</th>
                        <th scope="col">Head 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Body 1</td>
                        <td role="link">Body 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="testcase2">
            <table role="grid" aria-label="testcase 2">
                <thead>
                    <tr>
                        <th scope="col">Head 1</th>
                        <th scope="col">Head 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Body 1</td>
                        <td role="link">Body 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="testcase3">
            <table role="table">
                <thead>
                    <tr>
                        <th scope="col">Head 1</th>
                        <th scope="col">Head 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Body 1</td>
                        <td role="link">Body 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="testcase4">
            <table role="treegrid" aria-label="testcase 4">
                <thead>
                    <tr>
                        <th scope="col">Head 1</th>
                        <th scope="col">Head 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Body 1</td>
                        <td role="link">Body 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
    <script>
        UnitTest = {
            ruleIds: ["table_aria_descendants"],
            results: [
                {
                    "ruleId": "table_aria_descendants",
                    "value": [
                        "INFORMATION",
                        "FAIL"
                    ],
                    "path": {
                        "dom": "/html[1]/body[1]/main[1]/div[1]/table[1]/tbody[1]/tr[1]/td[2]",
                        "aria": "/document[1]/main[1]/table[1]/rowgroup[2]/row[1]/link[1]"
                    },
                    "reasonId": "explicit_role",
                    "message": "An explicit WAI-ARIA 'role' is not valid for <td> element within a WAI-ARIA role 'table' per the ARIA in HTML specification",
                    "messageArgs": ["td", "table"],
                    "apiArgs": [],
                    "category": "Accessibility"
                },
                {
                    "ruleId": "table_aria_descendants",
                    "value": [
                        "INFORMATION",
                        "FAIL"
                    ],
                    "path": {
                        "dom": "/html[1]/body[1]/main[1]/div[2]/table[1]/tbody[1]/tr[1]/td[2]",
                        "aria": "/document[1]/main[1]/grid[1]/rowgroup[2]/row[1]/link[1]"
                    },
                    "reasonId": "explicit_role",
                    "message": "An explicit WAI-ARIA 'role' is not valid for <td> element within a WAI-ARIA role 'grid' per the ARIA in HTML specification",
                    "messageArgs": ["td", "grid"],
                    "apiArgs": [],
                    "category": "Accessibility"
                },
                {
                    "ruleId": "table_aria_descendants",
                    "value": [
                        "INFORMATION",
                        "FAIL"
                    ],
                    "path": {
                        "dom": "/html[1]/body[1]/main[1]/div[3]/table[1]/tbody[1]/tr[1]/td[2]",
                        "aria": "/document[1]/main[1]/table[2]/rowgroup[2]/row[1]/link[1]"
                    },
                    "reasonId": "explicit_role",
                    "message": "An explicit WAI-ARIA 'role' is not valid for <td> element within a WAI-ARIA role 'table' per the ARIA in HTML specification",
                    "messageArgs": ["td", "table"],
                    "apiArgs": [],
                    "category": "Accessibility"
                },
                {
                    "ruleId": "table_aria_descendants",
                    "value": [
                        "INFORMATION",
                        "FAIL"
                    ],
                    "path": {
                        "dom": "/html[1]/body[1]/main[1]/div[4]/table[1]/tbody[1]/tr[1]/td[2]",
                        "aria": "/document[1]/main[1]/treegrid[1]/rowgroup[2]/row[1]/link[1]"
                    },
                    "reasonId": "explicit_role",
                    "message": "An explicit WAI-ARIA 'role' is not valid for <td> element within a WAI-ARIA role 'treegrid' per the ARIA in HTML specification",
                    "messageArgs": ["td", "treegrid"],
                    "apiArgs": [],
                    "category": "Accessibility"
                }
            ]
        };
    </script>
</body>

</html>